<template>
    <div class="dangerDayReport">
        <div class="dateBox">
            <el-date-picker
                v-model="daterange"
                popper-class="eventTimePicker"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            >
            </el-date-picker>
            <!-- <b style="color:#000;cursor:pointer;" @click="handleSearchClick">chaxun</b> -->
            <div class="dateBox">
                <div
                    :class="{ dateItem: true, dateItemUnActive: !item.inside }"
                    v-for="(item, index) of dataList"
                    :key="index"
                    @click="getReportData(item)"
                >
                    <p>{{ index + 1 }}、</p>
                    <p>{{ item.time }}安全生产日报</p>
                </div>
            </div>
        </div>
        <div class="box" v-if="reportDataHeader">
            <!-- 表格数据 -->
            <div class="title w17h1">
                海南省生产安全事故每日快报({{ reportDataHeader.title }})
            </div>
            <div class="statTime w17h1">
                统计日期：{{ reportDataHeader.statTime }}
            </div>
            <div class="tHeader parent">
                <div class="empty"></div>
                <div class="pin parent">
                    <div class="pinshang w2h1">
                        {{ reportDataHeader.statByYearVos[0].year }}
                    </div>
                    <div class="pinxia parent">
                        <div class="pinxiazuo w1h2">起数(起)</div>
                        <div class="pinxiayou w1h2">死亡(人)</div>
                    </div>
                </div>
                <div class="pin parent">
                    <div class="pinshang w2h1">
                        {{ reportDataHeader.statByYearVos[1].year }}
                    </div>
                    <div class="pinxia parent">
                        <div class="pinxiazuo w1h2">起数(起)</div>
                        <div class="pinxiayou w1h2">死亡(人)</div>
                    </div>
                </div>
                <div class="pin parent">
                    <div class="pinshang w2h1">
                        {{ reportDataHeader.statByYearVos[2].year }}
                    </div>
                    <div class="pinxia parent">
                        <div class="pinxiazuo w1h2">起数(起)</div>
                        <div class="pinxiayou w1h2">死亡(人)</div>
                    </div>
                </div>
                <div class="pin parent">
                    <div class="pinshang w4h1">
                        {{ reportDataHeader.compareByYearVos[0].year }}
                    </div>
                    <div class="pinxia parent">
                        <div class="pin pinxiazuo parent">
                            <div class="pinshang w2h1">起数(起)</div>
                            <div class="pinxia parent">
                                <div class="pinxiazuo w1h1">±</div>
                                <div class="pinxiayou w1h1">±%</div>
                            </div>
                        </div>
                        <div class="pin pinxiayou parent">
                            <div class="pinshang w2h1">死亡(人)</div>
                            <div class="pinxia parent">
                                <div class="pinxiazuo w1h1">±</div>
                                <div class="pinxiayou w1h1">±%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pin parent">
                    <div class="pinshang w4h1">
                        {{ reportDataHeader.compareByYearVos[1].year }}
                    </div>
                    <div class="pinxia parent">
                        <div class="pin pinxiazuo parent">
                            <div class="pinshang w2h1">起数(起)</div>
                            <div class="pinxia parent">
                                <div class="pinxiazuo w1h1">±</div>
                                <div class="pinxiayou w1h1">±%</div>
                            </div>
                        </div>
                        <div class="pin pinxiayou parent">
                            <div class="pinshang w2h1">死亡(人)</div>
                            <div class="pinxia parent">
                                <div class="pinxiazuo w1h1">±</div>
                                <div class="pinxiayou w1h1">±%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tBody parent">
                <div
                    class="rowBox parent"
                    v-for="(item, index) of reportDataBody"
                    :key="index"
                >
                    <div
                        :class="{
                            colBox: true,
                            w1h1: true,
                            w3h1: itemKey === 'target',
                        }"
                        v-for="(itemKey, indexKey) of rowKey"
                        :key="indexKey"
                    >
                        {{ item[itemKey] }}
                    </div>
                </div>
            </div>
            <div class="describe w17h1">
                <!-- 全国事故总体情况 -->
                <h3>{{ reportDataHeader.describeVos[1].key }}</h3>
                <div class="overall parent">
                    {{ reportDataHeader.describeVos[1].content[0] }}
                </div>
                <!-- 较大事故 -->
                <h3>{{ reportDataHeader.describeVos[0].key }}</h3>
                <div class="bigger parent">
                    <!-- {{reportDataHeader.describeVos[0].content[0]}} -->
                    <p
                        v-for="(item, index) of reportDataHeader.describeVos[0]
                            .content"
                        :key="index"
                    >
                        {{ item }}
                    </p>
                    <!-- {{reportDataHeader.describeVos[0].content}} -->
                    <!-- <p> 1.1月12日6时许，海南环岛高速公路东方市境内（三亚往海口方向）387Km+400m 路段，一辆鲁H98B39 号重型半挂牵引车追尾一辆无号牌四轮农用拖拉机，造成3人当场死亡、5人不同程度受伤及两车损坏。</p>
                    <p> 2.1月27日1时许，儋州市那大镇美洋线7公里西联豪庭处往洋浦方向发生一起小货车（琼A2ZW63）与摩托车相撞，造成摩托车上3人死亡。</p>
                    <p>3.2月15日10时50分许，保亭县毛感乡毛胆村委会什吐村附近，一艘玻璃钢冲锋舟在毛拉洞水库库区发生侧翻沉没事故，致5人死亡。</p>
                    <p> 4.4月11日20时23分,一辆无号牌二轮摩托车(搭乘王平雄、王德毅2人)沿海榆中线由南往北行驶至海榆中线113KM路段处,与对向行驶而来无号牌二轮摩托车(陈明驾驶)会车时发生碰撞后侧翻,随后由北往南行驶途经现场的琼FH5660号小客车（卢爱娟驾驶）碾压到躺在道路上的当事人王平雄。该起事故造成王平雄、王德毅、陈明3人当场死亡及两辆摩托车损坏的道路交通事故。</p> -->
                </div>
            </div>
            <div class="chart">
                <div class="leftBox parent">
                    <div id="leftChart" class="parent"></div>
                    <div class="tableBox parent">
                        <!-- <div class="first">
                            <p></p>
                            <p v-for="(item, index) of leftChartData.xData_left" :key="index">{{item}}</p>
                        </div> -->
                        <div class="second parent">
                            <p>
                                <span class="color"></span>
                                <span>起数</span>
                            </p>
                            <p
                                v-for="(
                                    item, index
                                ) of leftChartData.yData1_left"
                                :key="index"
                            >
                                {{ item }}
                            </p>
                        </div>
                        <div class="third parent">
                            <p>
                                <span class="color"></span>
                                <span>死亡</span>
                            </p>
                            <p
                                v-for="(
                                    item, index
                                ) of leftChartData.yData2_left"
                                :key="index"
                            >
                                {{ item }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="rightBox parent">
                    <div id="rightChart" class="parent"></div>
                    <div class="tableBox parent">
                        <!-- <div class="first">
                            <p></p>
                            <p v-for="(item, index) of rightChartData.xData_right" :key="index">{{item}}</p>
                        </div> -->
                        <div class="second parent">
                            <p>
                                <span class="color"></span>
                                <span>起数</span>
                            </p>
                            <p
                                v-for="(
                                    item, index
                                ) of rightChartData.yData1_right"
                                :key="index"
                            >
                                {{ item }}
                            </p>
                        </div>
                        <div class="third parent">
                            <p>
                                <span class="color"></span>
                                <span>死亡</span>
                            </p>
                            <p
                                v-for="(
                                    item, index
                                ) of rightChartData.yData2_right"
                                :key="index"
                            >
                                {{ item }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nodata" v-else>该日期无报告</div>
        <div class="funcBtn">
            <p
                @click="loadReport()"
                :style="{ cursor: countDown > 0 ? 'not-allowed' : 'pointer' }"
            >
                <img
                    class="mouseout"
                    src="/images/fireReport/icon/xiazai.png"
                    alt=""
                />
                <img
                    class="mousein"
                    src="/images/fireReport/icon/xiazai2.png"
                    alt=""
                />下载<span v-show="countDown > 0">({{ countDown }})</span>
            </p>
            <p @click="closePreview(false)">
                <img
                    class="mouseout"
                    src="/images/fireReport/icon/close.png"
                    alt=""
                />
                <img
                    class="mousein"
                    src="/images/fireReport/icon/close2.png"
                    alt=""
                />关闭
            </p>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
export default {
    name: "ProductionDangerAccidentDayFormDetail",
    data() {
        return {
            daterange: "",
            countDown: 0,
            reportDataHeader: null,
            reportDataBody: null,
            rowKey: [
                "target",
                "nowNum",
                "nowDeathTollSum",
                "lastNum",
                "lastDeathTollSum",
                "beforeLastNum",
                "beforeLastTollSum",
                "lastCountNum",
                "lastCountPer",
                "lastCountDeathNum",
                "lastCountDeathPer",
                "beforeLastCountNum",
                "beforeLastCountPer",
                "beforeLastCountDeathNum",
                "beforeLastCountDeathPer",
            ],
            leftChartData: {
                xData_left: [],
                yData1_left: [],
                yData2_left: [],
            },
            rightChartData: {
                xData_right: [],
                yData1_right: [],
                yData2_right: [],
            },
            dataList: [],
            elderTime: 1623859200000, //6月17日
            currentReport: null,
            currentDaterange:null
        };
    },
    watch: {
        daterange(val) {
            console.log({val});
            this.currentDaterange = val
            this.cutDate([
                new Date(this.currentDaterange[0]).getTime(),
                new Date(this.currentDaterange[1]).getTime(),
            ]);
        },
    },
    // computed: {
    //     dangerForm() {
    //         return this.$store.state.dangerDayForm;
    //     },
    // },
    mounted() {
        let today = new Date().getTime();
        this.daterange = [today, today];
    },
    methods: {
        handleSearchClick(){
            //console.log({val});
            this.currentDaterange = this.daterange;
            this.cutDate([
                new Date(this.currentDaterange[0]).getTime(),
                new Date(this.currentDaterange[1]).getTime(),
            ]);
        },
        // 关闭报告面板
        closePreview() {
            this.$store.commit("changeDangerDayForm", null);
        },
        // 获取报告数据
        getReportData(item) {
            this.reportDataHeader = null;
            this.reportDataBody = null;
            this.leftChartData = {
                xData_left: [],
                yData1_left: [],
                yData2_left: [],
            },
            this.rightChartData = {
                xData_right: [],
                yData1_right: [],
                yData2_right: [],
            };
            this.currentReport = item;
            
            if (item.inside) {
                axios
                    .get(
                        `${sjzxUrl}/api/safeProductDisaster/dayReportByTime?time=${item.time}`
                    )
                    .then((res) => {
                        this.reportDataHeader = res.data.data;
                        
                        this.$nextTick(() => {
                            this.reportDataHeader.statByYearVos[0].categoryStat.forEach(
                                (ele) => {
                                    if (ele.statTarget != "合计") {
                                        this.leftChartData.xData_left.push(
                                            ele.statTarget
                                        );
                                        this.leftChartData.yData1_left.push(
                                            ele.num
                                        );
                                        this.leftChartData.yData2_left.push(
                                            ele.deathTollSum
                                        );
                                    }
                                }
                            );
                            this.reportDataHeader.statByYearVos.forEach(
                                (ele) => {
                                    this.rightChartData.xData_right.push(
                                        ele.year
                                    );
                                    this.rightChartData.yData1_right.push(
                                        ele.categoryStat[
                                            ele.categoryStat.length - 1
                                        ].num
                                    );
                                    this.rightChartData.yData2_right.push(
                                        ele.categoryStat[
                                            ele.categoryStat.length - 1
                                        ].deathTollSum
                                    );
                                }
                            );
                            this.initChart(
                                "leftChart",
                                "各行业",
                                this.leftChartData.xData_left,
                                this.leftChartData.yData1_left,
                                this.leftChartData.yData2_left
                            );
                            this.initChart(
                                "rightChart",
                                "较大",
                                this.rightChartData.xData_right,
                                this.rightChartData.yData1_right,
                                this.rightChartData.yData2_right
                            );
                        });
                    });
                axios
                    .get(
                        `${sjzxUrl}/api/safeProductDisaster/getSafeProductionReport`
                    )
                    .then((res) => {
                        // console.log(res)
                        this.reportDataBody = res.data.data;
                    });
            } else {
                this.$message({
                    type: "warning",
                    message: "该日期无报告",
                });
            }
        },
        // 下载报告
        loadReport() {
            if (this.currentReport.inside) {
                window.open(
                    `${sjzxUrl}/api/safeProductDisaster/downloadSafeProductionReport?time=${this.currentReport.time}`
                );
            } else {
                this.$message({
                    type: "warning",
                    message: "该日期无报告可供下载",
                });
            }
        },
        // 柱状图
        initChart(element, title, xData, yData1, yData2) {
            let chartDom = echarts.init(document.getElementById(element));
            let option = {
                title: {
                    text: `${this.reportDataHeader.statTime}全省${title}事故情况`,
                    left: "center",
                    textStyle: {
                        color: "#000",
                        fontSize: 14,
                    },
                },
                legend: {
                    data: ["起数", "死亡"],
                },
                grid: {
                    left: "30",
                    bottom: "85",
                    top: "50",
                    right: "10",
                },
                xAxis: {
                    type: "category",
                    data: xData,
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 40,
                        textStyle: {
                            fontSize: "12",
                            color: "#000",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#000",
                        },
                    },
                },
                series: [
                    {
                        data: yData1,
                        type: "bar",
                        label: {
                            show: true,
                            position: "top",
                        },
                    },
                    {
                        data: yData2,
                        type: "bar",
                        label: {
                            show: true,
                            position: "top",
                        },
                    },
                ],
            };
            chartDom.setOption(option);
            window.addEventListener("resize", () => {
                chartDom.resize();
            });
        },
        // 时间段分割
        cutDate(time) {
            let today = new Date();
            let today0 = new Date(
                `${today.getFullYear()}-${
                    today.getMonth() + 1
                }-${today.getDate()} 00:00:00`
            ).getTime();
            let today8 = new Date(
                `${today.getFullYear()}-${
                    today.getMonth() + 1
                }-${today.getDate()} 08:00:00`
            ).getTime();
            console.log(today0)
            console.log(today8)
            this.dataList = [];
            let startDate = time[0];
            let endDate = time[1];
            console.log(time)
            let timestamp = startDate;
            //开始时间，小于等于结束时间
            while (timestamp <= endDate) {
                console.log("进入时间计算");
                let inside = true;
                if (timestamp < this.elderTime || timestamp > today0) {
                    inside = false;
                } else if (
                    timestamp === today0 &&
                    today.getTime() >= today0 &&
                    today.getTime() <= today8
                ) {
                    inside = false;
                }
                
                let timeRes = this.dataFormate(timestamp);
                this.dataList.push({
                    time: timeRes,
                    inside: inside,
                });
                timestamp += 1000 * 60 * 60 * 24;
            }
            console.log(this.dataList)
            //默认展示第一个
            //this.getReportData(this.dataList[0]);
            console.log("显示第一个")
        },
        // 时间戳转年月日
        dataFormate(timestamp) {
            let date = new Date(timestamp);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month < 10 ? `0${month}` : month;
            day = day < 10 ? `0${day}` : day;
            return `${year}-${month}-${day}`;
        },
    },
};
</script>

<style lang="stylus">
.dangerDayReport {
    .el-range-editor.el-input__inner, .el-date-editor .el-range-input {
        width: 100%;
        height: 30px;
        background: transparent;
    }

    .el-date-range-picker__content .el-date-range-picker__header div {
        color: #000;
    }

    .el-range-separator {
        color: #fff;
        height: unset;
    }

    .el-input__inner {
        height: 30px;
    }

    .el-select-dropdown__item span {
        color: #000;
    }

    .el-input--suffix .el-input__inner {
        padding-right: 0;
    }

    .el-input__suffix, .el-input__icon {
        line-height: 30px;
    }

    .el-select {
        flex: 1;
    }

    .el-date-table td span {
        color: #000;
    }
}
</style>
<style lang="stylus" scoped>
.dangerDayReport {
    position: absolute;
    left: 220px;
    top: 135px;
    bottom: 65px;
    width: 1500px;
    border: 1px solid #ddd;
    z-index: 3;
    background: #fff;
    padding: 10px;
    display: flex;

    .dateBox {
        flex: 1;
        margin-right: 10px;
        height: 100%;
        display: flex;
        flex-direction: column;

        .dateBox {
            flex: 1;
            overflow: auto;
            overflow-x: hidden;
            margin: 10px 10px;
            margin-right: 0;

            .dateItem {
                cursor: pointer;
                display: flex;
                border-bottom: 1px dashed #eee;
                padding-bottom: 10px;
                padding-top: 10px;
                font-size: 16px;

                p {
                    line-height: 30px;
                    color: #000;
                }

                p:first-child {
                    width: 30px;
                }

                p:last-child {
                    text-align: left;
                    flex: 1;

                    &:hover {
                        color: #10daff;
                    }
                }
            }

            .dateItemUnActive {
                p {
                    color: #eee;
                }

                p:last-child:hover {
                    color: #eee;
                }
            }
        }
    }

    .nodata {
        width: vw_1920(17);
        height: 100%;
        color: #000;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .box {
        height: 100%;
        overflow: auto;
        border-left: 1px solid #000;
        display: flex;
        flex-direction: column;

        div {
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            text-align: center;
            line-height: vw_1920(1);
            box-sizing: border-box;
            color: #000;
        }

        div.parent {
            border-right: 0;
            border-bottom: 0;
        }

        .w17h1 {
            width: vw_1920(17);
            height: vw_1920(1);
        }

        .title {
            font-size: 20px;
            font-weight: 900;
            border-top: 1px solid #000;
        }

        .statTime {
            text-align: left;
        }

        .tHeader {
            width: vw_1920(17);
            display: flex;
            font-weight: 900;
            margin-right: 10px;

            .empty {
                width: vw_1920(3);
                height: vw_1920(3);
            }

            .pin {
                .pinshang {
                    width: 100%;
                }

                .pinxia {
                    display: flex;
                }

                .w2h1 {
                    width: vw_1920(2);
                    height: vw_1920(1);
                }

                .w1h2 {
                    width: vw_1920(1);
                    height: vw_1920(2);
                }

                .w1h1 {
                    width: vw_1920(1);
                    height: vw_1920(1);
                }

                .w4h1 {
                    width: vw_1920(4);
                    height: vw_1920(1);
                }
            }
        }

        .tBody {
            .rowBox {
                width: vw_1920(17);
                display: flex;

                .colBox {
                    width: vw_1920(1);
                    height: vw_1920(1);
                }

                .w1h1 {
                    width: vw_1920(1);
                    height: vw_1920(1);
                }

                .w3h1 {
                    width: vw_1920(3) !important;
                }
            }
        }

        .describe {
            height: unset;
            text-align: left;
            border-top: 0;

            h3 {
                font-weight: 900;
                color: #000;
            }

            .overall, .bigger {
                text-align: left;
                text-indent: 2em;

                p {
                    color: #000;
                }
            }
        }

        .chart {
            height: 450px;
            width: vw_1920(17);
            display: flex;
            justify-content: space-evenly;
            border-bottom: 0;
            padding-bottom: 20px;
            border-bottom: 1px solid #999;

            >div {
                margin-top: 10px;
                width: vw_1920(8);

                #leftChart, #rightChart {
                    width: 100%;
                    height: 360px;
                }

                .tableBox {
                    width: 100%;
                    height: 20%;
                    border-top: 1px solid #999;
                    border-left: 1px solid #999;

                    .first, .second, .third {
                        display: flex;
                        height: 50%;

                        p {
                            flex: 2;
                            border-right: 1px solid #999;
                            border-bottom: 1px solid #999;
                            color: #000;
                            display: flex;
                            justify-content: space-evenly;
                            align-items: center;

                            span {
                                color: #000;
                            }
                        }

                        p:first-child {
                            flex: 3;
                            display: flex;
                            justify-content: space-evenly;
                            align-items: center;

                            .color {
                                width: 10px;
                                height: 10px;
                                margin-right: 5px;
                            }
                        }
                    }

                    .first p:first-child .color {
                        background: rgba(91, 155, 213, 1);
                    }

                    .second p:first-child .color {
                        background: rgba(194, 53, 49, 1);
                    }

                    .third p:first-child .color {
                        background: rgba(47, 69, 84, 1);
                    }
                }
            }
        }
    }

    .funcBtn {
        color: #000;
        padding-top: 5px;
        position: absolute;
        bottom: -35px;
        right: 10px;
        text-align: center;

        p {
            float: right;
            margin-left: 20px;
            cursor: pointer;
            width: 102px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            opacity: 1;
            background: #042039;
            border: 1px solid #17d0ff;
            border-radius: 3px;
            color: #17d0ff;

            img {
                width: 18px;
                height: 18px;
                vertical-align: middle;
                margin-right: 8px;
            }

            .mousein {
                display: none;
            }
        }

        p:hover {
            background: #05718c;
            color: #000;

            .mousein {
                display: inline-block;
            }

            .mouseout {
                display: none;
            }
        }
    }
}
</style>